<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon-16x16.png" type="image/x-icon">
    <title>苏小课直播教学平台</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('./iconfont/iconfont.eot?t=1622112789486');
            /* IE9 */
            src: url('./iconfont/iconfont.eot?t=1622112789486#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('./iconfont/iconfont.woff2?t=1622112789486') format('woff2'),
                url('./iconfont/iconfont.woff?t=1622112789486') format('woff'),
                url('./iconfont/iconfont.ttf?t=1622112789486') format('truetype'),
                url('./iconfont/iconfont.svg?t=1622112789486#zgfont') format('svg');
        }

        * {
            margin: 0;
        }

        body {
            background-color: #f4f5f8;
            min-width: 1000px;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .top {
            display: flex;
            margin-bottom: 30px;
            width: 100%;
            height: 60px;
            background-color: #fff;
            box-sizing: border-box;
            padding: 0 30px 0 40px;
        }

        .banner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .banner .title-wrap {
            display: flex;
            align-items: center;
        }

        .banner .title-wrap .logo {
            width: 91px;
            height: 22px;
            background: url('./assets/images/roomkit_logo.png') no-repeat center;
            background-size: 100%;
        }

        .banner .title-wrap .line {
            width: 1px;
            margin: 0 22px;
            height: 22px;
            background-color: #d7d9dc;
        }

        .banner .title {
            font-size: 18px;
            color: #040404;
        }

        .btn-box {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
            font-size: 14px;
            color: #040404;
            cursor: pointer;
        }

        .triangle {
            display: block;
            margin-left: 9px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 5px 0 5px;
            border-color: #040404 transparent transparent transparent;
        }

        .settings-item .triangle {
            border-color: #93959a transparent transparent transparent;
        }

        .menu-bg {
            display: none;
            position: absolute;
            top: 60px;
            right: 0;
            background-color: #fff;
            padding: 10px 0;
            height: 96px;
            box-shadow: 0px 2px 4px 0px rgba(101, 102, 110, 0.16);
            border-radius: 4px;
        }

        .menu {
            width: 130px;
            height: 32px;
            box-sizing: border-box;
            padding: 0 15px;
            /* background-color: #fff; */
            /* border-radius: 4px; */
            /* box-shadow: 0px 2px 4px 0px rgba(101, 102, 110, 0.16); */
        }

        .menu:hover {
            background-color: #eef2ff;
        }

        .menu-item {
            white-space: nowrap;
            box-sizing: border-box;
            padding-right: 52px;
            width: 100%;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #0f0f0f;
        }

        .box {
            width: 740px;
            height: 780px;
            background-color: #fff;
            border-radius: 4px;
        }

        .class-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 40px 10px 120px;
            overflow: auto;
            height: 536px;
        }

        .item {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            margin-bottom: 24px;
            width: 628px;
            height: 88px;
            background-color: #fff;
            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
            border-radius: 4px;
        }

        .item:hover {
            box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.08);
        }

        .time-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-left: 33px;
            padding-right: 24px;
            height: 48px;
            border-right: 1px solid #f1f1f1;
            font-size: 16px;
            color: #666666;
        }

        .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 23px;
            width: 529px;
            height: 100%;
        }

        .text-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 48px;
        }

        .text-box .title {
            font-size: 16px;
            color: #0f0f0f;
        }

        .text-box .id {
            font-size: 14px;
            color: #868ca0;
        }

        .btn {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .btn button {
            margin-right: 4px;
            width: 82px;
            height: 34px;
            background-color: #fff;
            border: 1px solid #2953ff;
            border-radius: 4px;
            font-size: 14px;
            color: #2953ff;
            cursor: pointer;
        }

        .btn button:focus {
            outline: none;
        }

        .btn button:hover {
            background-color: #2953ff;
            color: #fff;
        }

        .close {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            cursor: pointer;
            align-self: flex-start;
        }

        .close:before,
        .close:after {
            position: absolute;
            content: ' ';
            height: 12px;
            width: 1.6px;
            border-radius: 2px;
            background-color: #999999;
        }

        .close:before {
            transform: rotate(45deg);
        }

        .close:after {
            transform: rotate(-45deg);
        }

        .no-class {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 236px;
            font-size: 14px;
            color: #868ca0;
        }

        .no-class .img-box {
            margin-bottom: 10px;
            width: 120px;
            height: 120px;
            background-image: url('./assets/images/noclass-img.png');
            background-size: cover;
        }

        .box-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 84px;
            border-top: 1px solid #f1f1f1;
        }

        .box-bottom button {
            width: 180px;
            height: 44px;
            background-color: #2953ff;
            border-radius: 22px;
            font-size: 14px;
            color: #fff;
            box-shadow: 0px 8px 30px 0px rgba(41, 83, 255, 0.3);
            cursor: pointer;
            border: none;
        }

        .box-bottom button:focus {
            outline: none;
        }

        .delete-dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .delete-dialog .dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 33px 0 30px;
            box-sizing: border-box;
            width: 346px;
            height: 161px;
            background-color: #fff;
            border-radius: 4px;
            font-size: 14px;
            color: #000000;
        }

        .create-dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .create-dialog .dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 33px 0 30px;
            box-sizing: border-box;
            width: 420px;
            height: 400px;
            background-color: rgb(239, 239, 239);
            border-radius: 4px;
            font-size: 14px;
            color: #000000;
        }

        .delete-dialog .dialog .desc {
            margin: 13px 0 24px;
            color: #333333;
        }

        .delete-dialog .dialog .btn-box button {
            width: 92px;
            height: 30px;
            border-radius: 4px;
            cursor: pointer;
        }

        .delete-dialog .dialog .btn-box button:focus {
            outline: none;
        }

        .delete-dialog .dialog .btn-box .cancel {
            margin-right: 8px;
            background-color: #fff;
            border: 1px solid #666666;
            color: #333333;
        }

        .delete-dialog .dialog .btn-box .confirm {
            background-color: #2953ff;
            border: 1px solid #2953ff;
            color: #edf1fa;
        }

        .class-type-mask,
        .setting-dialog-mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0.4);
            display: none;
        }

        .class-type-mask .class-type-box {
            width: 334px;
            height: 410px;
            background: #FFFFFF;
            border-radius: 4px;

        }

        .setting-dialog-mask .class-type-box {
            width: 380px;
            height: 360px;
            background: #FFFFFF;
            border-radius: 4px;
        }

        .class-type-box .class-type-title-box {
            /* width: 448px; */
            height: 48px;
            padding: 0 8px 0 30px;
            background: #FFFFFF;
            border-radius: 4px 4px 0px 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #F1F1F1;
        }

        .class-type-title-box p {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            line-height: 48px;
        }

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .class-type-main {
            padding: 31px 66px 10px;
            /* height: 195px; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .class-type-item-box {
            margin-bottom: 30px;
            width: 68px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .class-type-item-box p {
            /* height: 11px; */
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #0F0F0F;
            margin-top: 14px;
        }

        .class-type-item {
            width: 68px;
            height: 68px;
            background: #FFFFFF;
            box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.08);
            border-radius: 34px;
            background-size: 100%;
            background-position: center;
            cursor: pointer;
        }

        .class-type-item:hover {
            background: linear-gradient(45deg, #2953FF, #427CFD);
            box-shadow: 0px 4px 14px 0px rgba(41, 83, 255, 0.3);
            background-position: center;
        }

        .class-type-item:hover .one-to-one {
            background: url('./assets/images/1v1-class-selected.png') no-repeat center/cover;
        }

        .class-type-item:hover .big-class {
            background: url('./assets/images/big-class-selected.png') no-repeat center/cover;
        }

        .class-type-item:hover .small-class {
            background: url('./assets/images/small-class-selected.png') no-repeat center/cover;
        }

        .class-type-item:hover .voice-class {
            background: url('./assets/images/voice-class-selected.png') no-repeat center/cover;
        }

        .class-type-item div {
            width: 34px;
            height: 34px;
            margin: 17px auto;
        }

        .class-type-item-active {
            background: linear-gradient(45deg, #2953FF, #427CFD);
            box-shadow: 0px 4px 14px 0px rgba(41, 83, 255, 0.3);
            background-position: center;
        }

        .class-type-btn {
            width: 92px;
            height: 30px;
            background: #2953FF;
            border-radius: 4px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #EDF1FA;
            text-align: center;
            line-height: 30px;
            margin: 0 auto;
            cursor: pointer;
        }

        .one-to-one {
            background: url('./assets/images/1v1-class-normal.png') no-repeat center/cover;
        }

        .one-to-one-active {
            background: url('./assets/images/1v1-class-selected.png') no-repeat center/cover;
        }

        .small-class {
            background: url('./assets/images/small-class-normal.png') no-repeat center/cover;
        }

        .small-class-active {
            background: url('./assets/images/small-class-selected.png') no-repeat center/cover;
        }

        .big-class {
            background: url('./assets/images/big-class-normal.png') no-repeat center/cover;
        }

        .big-class-active {
            background: url('./assets/images/big-class-selected.png') no-repeat center/cover;
        }

        .voice-class {
            background: url('./assets/images/voice-class-normal.png') no-repeat center/cover;
        }

        .voice-class-active {
            background: url('./assets/images/voice-class-selected.png') no-repeat center/cover;
        }

        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px 0 30px;
            height: 48px;
        }

        .settings-item .wrap {
            display: flex;
            align-items: center;
        }

        .settings-item .tips {
            width: 12px;
            line-height: 12px;
            margin-left: 7px;
            cursor: pointer;
            color: #b0b2b8;
        }

        .settings-item .tips:hover {
            color: #93959a;
        }

        .settings-item .env-tips {
            display: none;
            position: absolute;
            top: 17px;
            left: -6px;
            width: 204px;
            height: 54px;
            background: rgba(20, 23, 32, 0.88);
            box-shadow: 0px 1px 4px 0px rgba(101, 102, 109, 0.3);
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            line-height: 18px;
            box-sizing: border-box;
            padding: 9px 12px;
        }

        .settings-item .menu {
            width: auto;
            height: 32px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .settings-item .menu .icon {
            display: none;
            width: 12px;
            height: 12px;
            line-height: 12px;
            color: #2953ff;
        }

        .settings-item .label {
            display: flex;
            align-items: center;
            line-height: 48px;
            font-size: 14px;
            color: #0f0f0f;
        }

        .settings-item .name {
            color: #666;
        }

        .settings-item .menu-bg {
            display: none;
            position: absolute;
            right: 0;
            background-color: #fff;
            padding: 10px 0;
            display: none;
            height: auto;
            z-index: 2;
            top: 26px;
            box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.08);
            border-radius: 4px;
        }

        .settings-item .btn-box {
            height: 20px;
        }

        .settings-item .options-up {
            display: block;
            margin-left: 9px;
        }

        .switch-box {
            position: relative;
            width: 32px;
            height: 16px;
            background-color: #ccc;
            border-radius: 8px;
            transition: background-color 0.3s;
            cursor: pointer;
        }

        .switch-box::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            border-radius: 100%;
            transition: all 0.3s;
            width: 12px;
            height: 12px;
            background-color: #fff;
        }

        .switch-box.is-checked {
            background-color: #2a54ff;
        }

        .switch-box.is-checked::after {
            left: 100%;
            margin-left: -14px;
        }

        .setting-main {
            margin-top: 9px;
        }

        .edit {
            position: fixed;
            right: 36px;
            bottom: 36px;
            display: flex;
            font-size: 32px;
            cursor: pointer;
            box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.08);
        }

        .edit:hover {
            box-shadow: none;
        }

        .edit>i {
            font-family: "iconfont" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            border-radius: 4px;
            background-color: #444;
            color: #fff;
            padding: 6px;
        }

        .edit:hover>i {
            background-color: #2953FF;
        }

        .edit>div {
            display: none;
        }

        .edit:hover>div {
            display: block;
            width: 108px;
            height: 44px;
            line-height: 44px;
            margin-right: 6px;
            font-size: 14px;
            border-radius: 4px;
            text-align: center;
            color: #2953ff;
            background-color: #fff;
            box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.08);
        }
    </style>
</head>

<body>
    <div class="wrapper" style="visibility: hidden;">
        <div class="top">
            <div class="banner">
                <div class="title-wrap">
                    <!-- <div class="logo"></div> -->
                    <div>
                        <a style="color: inherit;text-decoration: none;"
                            href="/src/pages/teacherHome/home.html">&lt;返回</a>
                    </div>
                    <div class="line"></div>
                    <div class="title lang" data-locale="room_list_web">课堂列表</div>
                </div>
                <div class="btn-box" onmouseenter="showMenu()" onmouseleave="showMenu('false')">
                    <span class="name"></span>
                    <span class="triangle"></span>
                    <div class="menu-bg">
                        <div class="menu">
                            <div class="menu-item lang" data-locale="file_preview_web" onclick="toPreviewFile()">文件预览
                            </div>
                        </div>
                        <div class="menu">
                            <div class="menu-item lang" data-locale="setting" onclick="openSetting()">设置</div>
                        </div>
                        <div class="menu">
                            <div class="menu-item lang" data-locale="setting_logout" onclick="loginOut()">退出登录</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="class-wrap"></div>
            <div class="box-bottom">
                <button class="lang" data-locale="room_schedule_web" onclick="handleCreateClass()">创建课堂</button>
            </div>
        </div>
    </div>
    <!-- 删除dialog -->
    <div class="delete-dialog">
        <div class="dialog">
            <div class="title lang" data-locale="room_delete_title_web">是否删除课堂</div>
            <div class="desc lang" data-locale="room_delete_web">确定删除该课堂？删除后该课堂将自动结束</div>
            <div class="btn-box">
                <button class="cancel lang" data-locale="cancel" onclick="clickDialog(false)">取消</button>
                <button class="confirm lang" data-locale="confirm" onclick="clickDialog(true)">确定</button>
            </div>
        </div>
    </div>
    <!-- 创建课堂dialog -->
    <div class="create-dialog" id="createDialog">
        <div class="dialog">
            <h1>创建直播课堂</h1>
            <span style="margin-top: 20px;font-size: 20px;">课堂名称：</span>
            <input id="className" type="text">

            <span style="margin-top: 20px;font-size: 20px;">课堂开始时间：</span>
            <input id="inpDate" type="date" style="width: 100px;height: 100px;"><br>
            <input id="inpTime" type="time" style="width: 100px;height: 100px;">

            <span style="margin-top: 20px;font-size: 20px;">课堂时长(分钟)：</span>
            <input id="classDuration" type="number">
            <div class="btn-box">
                <button style="margin-right: 10px;" class="cancel lang" data-locale="cancel"
                    onclick="clickConfirmDialog(false)">取消</button>
                <button style="margin-left: 10px;" class="confirm lang" data-locale="confirm"
                    onclick="clickConfirmDialog(true)">确定</button>
            </div>
        </div>
    </div>
    <!--设置 弹窗-->
    <div class="setting-dialog-mask">
        <div class="class-type-box center">
            <div class="class-type-title-box">
                <p class="lang" data-locale="setting">设置</p>
                <div class="close type-close" onclick="hideSettingDialog()"></div>
            </div>
            <div class="setting-main">
                <div class="settings-item">
                    <div class="label lang" data-locale="room_language">语言</div>
                    <div class="btn-box" onclick="showSettingMenu(this, 1)">
                        <span class="name " id="lang">简体中文</span>
                        <span class="options-up" id="trg4"><i class="iconfont fontsize-12"
                                style="color:#666">&#59059;</i></span>
                        <div class="menu-bg set-bg">
                            <div class="menu" onclick="selectLang(this, 0)">
                                <div class="menu-item">简体中文</div>
                                <div class="icon arrow2"><i class="iconfont fontsize-12">&#59060;</i></div>
                            </div>
                            <div class="menu" onclick="selectLang(this, 1)">
                                <div class="menu-item ">English</div>
                                <div class="icon arrow2"><i class="iconfont fontsize-12">&#59060;</i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="settings-item">
                    <div class="label lang" data-locale="setting_room_mic_on_when_joining">进入房间时将麦克风开启</div>
                    <div class="switch-box MP" onclick="selectMP(this)"></div>
                </div>
                <div class="settings-item">
                    <div class="label lang" data-locale="setting_room_camera_on_when_joining">进入房间时将摄像头开启</div>
                    <div class="switch-box CM" onclick="selectCamera(this)"></div>
                </div>
                <div class="settings-item">
                    <div class="label lang" data-locale="setting_item_L3">大班课低延迟模式</div>
                    <div class="switch-box LD" onclick="selectLow(this)"></div>
                </div>
                <div class="settings-item">
                    <div class="label lang" data-locale="setting_item_Handwriting">开启笔锋</div>
                    <div class="switch-box Handwriting" onclick="selectHandwriting(this)"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 打开反馈入口 -->
    <div class="edit" id="edit">
        <div class="lang" data-locale="feedback">意见反馈</div>
        <i>&#xe6ad;</i>
    </div>
</body>

</html>
<script src="./config.js"></script>
<script src="./ZegoRoomKit.js?v=2.1.22.288"></script>
<script src="./lib/md5.js"></script>
<script src="./lib/axios.min.js"></script>
<script src="./public.js"></script>
<script src="./lang/zh-CN.js"></script>
<script src="./lang/en.js"></script>
<script src="./lib//systemInfo.js"></script>
<script src="./lib//request.js"></script>
<script>
    const deleteDialog = document.querySelector('.delete-dialog');
    const classWrap = document.querySelector('.class-wrap');

    const cookies = new Cookies();
    const toast = Toast.getInstance();
    const api = Api.getInstance();
    let userId;
    let deleteID = 0; //要删除的课程的roomId
    let deletePid = 0; //要删除的课程的roomId
    let language = 1; // 默认语言 中文
    let microphoneStatus = false; // 麦克风开启状态
    let cameraStatus = false; // 摄像头开启
    let lowDelayStatus = false; // 低延迟状态
    let enableHandwriting = true;
    // 浏览器检测变量
    let browser = '';
    let browserVs = '';
    let system = '';
    const systemInfo = new SystemInfo().getInfo();
    initFeedback();
    initDemoLanguage();
    loadProperties()
    // 初始化SDK
    const zg = new ZegoRoomKit();
    zg.init({
        secretID: SecretID,
    });

    // 复用用户信息
    userId = Number(cookies.getItem('uid'));
    const userName = cookies.getItem('userName');

    if (userId) {
        document.querySelector('.name').textContent = userName;
        microphoneStatus = cookies.getItem('microphoneStatus') === 'true' || false;
        cameraStatus = cookies.getItem('cameraStatus') === 'true' || false
        lowDelayStatus = cookies.getItem('lowDelay') === 'true' || false
        enableHandwriting = cookies.getItem('enableHandwriting') === 'false' ? false : true;
        if (cookies.getItem('language')) language = Number(cookies.getItem('language'))
        checkSettings();
        getListClass();
    } else {
        window.location.replace('./login.html');
    }
    // 更新demo文案，切换语言
    function loadProperties() {
        const langArr = document.querySelectorAll('.lang')
        langArr.forEach(item => {
            item.innerText = lang[item.getAttribute('data-locale')];
            item.setAttribute('placeholder', lang[item.getAttribute('data-locale')])
        });
        document.querySelector('.wrapper').style.visibility = 'visible'
    }
    // 初始化调查问卷
    function initFeedback() {
        document.getElementById('edit').addEventListener('click', () => {
            const appVs = ZegoRoomKit.version();
            const appVsArr = appVs.split('.');
            const appVersion = ((Number(appVsArr[0]) & 0xf) << 28) |
                ((Number(appVsArr[1]) & 0xf) << 24) |
                ((Number(appVsArr[2]) & 0xf) << 20) |
                (Number(appVsArr[3]) & 0xfffff);
            const lang = cookies.getItem("language") === '2' ? 'en' : 'ch';
            window.open(
                `https://demo-operation.zego.im/feedback/roomkit/index.html?platform=32&system_version=${systemInfo.system}_${systemInfo.systemVs}&app_version=${appVersion}&sdk_version=${appVs}&device_id=${systemInfo.browser}_${systemInfo.browserVs}&client=${systemInfo.browser}_${systemInfo.browserVs}&lang=${lang}`
            );
        })
    }
    // 初始化demo语言
    function initDemoLanguage() {
        if (cookies.getItem('language')) {
            language = Number(cookies.getItem('language'))
        } else {
            // 没有语言缓存就用浏览器首选语言
            const langC = navigator.systemLanguage ? navigator.systemLanguage : navigator.language;
            if (/^zh/.test(langC)) {
                language = 1;
            } else {
                language = 2;
            }
        }
        lang = language == 1 ? zh : en;
    }
    // 控制顶部banner的下拉菜单
    function showMenu(data) {
        const menu = document.querySelector('.menu-bg');
        if (data) {
            menu.style = 'display:none';
        } else {
            menu.style = 'display:block';
        }
    }

    let joinLiveInfo = {};
    // 创建课堂按钮事件
    function clickConfirmDialog(bool) {
        let createDialog = document.querySelector("#createDialog");
        createDialog.style = 'display:none';

        let className = document.querySelector("#className").value;
        let inpDate = document.querySelector("#inpDate").value;
        let inpTime = document.querySelector("#inpTime").value;
        let classDuration = document.querySelector("#classDuration").value;

        joinLiveInfo = {
            createTimestamp: new Date(inpDate + " " + inpTime).getTime(),
            endTimestamp: new Date(inpDate + " " + inpTime).getTime() + classDuration * 60,
            duration: classDuration,
            roomId: -1,
            subject: className
        }

        if (bool) {
            createClass(className, inpDate + " " + inpTime, parseInt(classDuration));
        }
    }

    // 删除dialog按钮事件
    function clickDialog(bool) {
        deleteDialog.style = 'display:none';
        if (bool) {
            deleteRoom(deleteID, deletePid);
            deleteID = 0;
        }
    }

    // 获取会议列表
    async function getListClass() {
        try {
            const token = cookies.getItem(`sdkToken-${userId}`) || await getSDKToken();
            cookies.setItem(`sdkToken-${userId}`, token, new Date(new Date().getTime() + 3600 * 1000 * 24));
            const list = await api.post('/room/query', {
                begin_timestamp: new Date().getTime() - 12 * 60 * 60 * 1000,
                count: 20,
                device_id: ZegoRoomKit.deviceID(),
                end_timestamp: 0,
                is_include_all: 0,
                status: 3,
                page: 1,
                uid: userId,
                sdk_token: token,
                device_id: ZegoRoomKit.deviceID(),
                secret_id: SecretID,
                verify_type: 3

            })
            console.log('list', list);
            if (!list.roomList) {
                renderList([])
            } else {
                // 给课程列表排序
                list.roomList.sort((a, b) => b.createTimestamp - a.createTimestamp);
                const noEndClass = list.roomList.filter(val => val.status < 4).map(val => ({
                    startTime: formatTime(val.beginTimestamp),
                    endTime: formatTime(val.endTimestamp),
                    title: val.subject,
                    id: val.roomId,
                    role: val.userRole,
                    pid: val.pid,
                    beginTimestamp: val.beginTimestamp
                }));
                noEndClass.sort()
                renderList(noEndClass);
            }
        } catch (error) {
            toast.error(lang.Room_list_failed); // 获取列表失败
            renderList([])
            throw error;

        }
    }
    // 渲染课程列表
    function renderList(classList) {
        let classListHTML = '';
        if (classList.length) {
            classList.forEach(item => {
                classListHTML += `<div class="item">
            <div class="time-box"><span>${item.startTime}</span><span>${item.endTime}</span></div>
            <div class="content">
                <div class="text-box">
                    <span class="title">${item.title}</span>
                    <p><span class="id lang" data-locale="room_id">${lang.room_id}</span><span class="id">${item.id}</span></p>
                </div>
                <div class="btn">
                    <button class="lang" data-locale="room_join" onclick="attend(${item.id},${item.role},${item.pid},${item.beginTimestamp})">${lang.room_join}</button>
                    <div class="close" onclick="handleDeleteClass(${item.id},${item.pid})"></div>
                </div>
            </div>
        </div>`;
            });
        } else {
            // 课堂列表缺省，没有课程
            classListHTML += `<div class="no-class">
            <div class="img-box"></div>
            <span class="lang" data-locale="room_schedule_empty_web">${lang.room_schedule_empty_web}</span>
        </div>`;
        }
        classWrap.innerHTML = classListHTML;
    }
    // 创建课堂
    async function createClass(className, dateTime, classDuration) {
        // switch (classType) {
        //     case 3:
        //         className = lang.schedule_1v1_default_title_placeholder
        //         break
        //     case 1:
        //         className = lang.schedule_small_class_default_title_placeholder
        //         break
        //     case 5:
        //         className = lang.schedule_large_class_default_title_placeholder
        //         break
        //     case 6: // 语音直播
        //         className = lang.schedule_voice_class_default_title_placeholder
        //         break
        // }
        try {
            console.log(className);
            console.log(dateTime);
            console.log(typeof classDuration);
            const token = await getSDKToken(userId);
            // cookies.setItem(`sdkToken-${userId}`, token, new Date(new Date().getTime() + 3600 * 1000 * 24));
            const createMeetingResult = await api.post('/room/create', {
                uid: userId,
                // 课程名字
                subject: className,
                // room_type: classType,
                // begin_timestamp: new Date().getTime() + 1000 * 600,
                begin_timestamp: new Date(dateTime).getTime(),
                duration: classDuration,
                // max_attendee_count: classType === 3 ? undefined : classType === 1 ? 100 : 500,
                host: {
                    uid: userId
                },
                attendees: [{
                    uid: userId
                }],
                // settings: {
                //     enable_attendee_cam: true,
                //     enable_attendee_mic: true,
                //     enable_host_cam: true,
                //     enable_host_mic: true,
                //     enable_attendee_share: false,
                //     enable_chat: true,
                //     enable_attendee_draw: false,
                //     is_auto_start: classType === 3 || classType === 1 || classType === 6,
                //     max_onstage_count: 4,
                //     is_private_room: false,
                //     enable_raise_hand: true,
                // },
                pid: ProductID,
                sdk_token: token,
                device_id: ZegoRoomKit.deviceID(),
                secret_id: SecretID,
                verify_type: 3
            });
            console.log('createMeetingResult', createMeetingResult)

            joinLiveInfo.roomId = createMeetingResult.roomId;
            // console.log(joinLiveInfo);
            axios({
                url:"http://localhost:9090/createLiveClass",
                method:"POST",
                data: joinLiveInfo
            }).then(res => {
                console.log(res);
            }).catch(err => {
                console.log(err);
            })

            getListClass();
        } catch (error) {
            toast.error(lang.room_schedule_failed + error.error || -1); // 创建失败，请重试
            throw error;

        }
    }
    // 检测浏览器版本
    async function checkBrowser() {
        if (systemInfo.browser !== 'chrome' && systemInfo.browser !== 'edge') return false;
        if (systemInfo.browserVs) {
            let browserVsArr = systemInfo.browserVs.split('.');
            if (Number(browserVsArr[0]) < 74) return false;
            return true;
        } else {
            return false;
        }
    }
    const ua = navigator.userAgent.toLowerCase()

    function testUa(regexp) {
        return regexp.test(ua);
    }

    function testVs(regexp) {
        let vs = ua.match(regexp)
        if (vs) {
            return vs.toString()
                .replace(/[^0-9|_.]/g, '')
                .replace(/_/g, '.');
        } else {
            return false
        }

    }

    async function attend(id, role, pid, beginTimestamp) {
        const check = await checkBrowser()
        if (check) {
            window.location.href =
                `./demo.html?user=${userId}&room=${id}&name=${encodeURIComponent(userName)}&role=${role}&pid=${pid}&c=${cameraStatus ? 2 : 1}&m=${microphoneStatus ? 2 : 1}&beginTimestamp=${beginTimestamp}&enableHandwriting=${enableHandwriting}`;
        } else {
            window.location.href = `./browserCheck.html?system=${systemInfo.system}`
        }
    }
    // 退出登录
    function loginOut() {
        let arr = ['uid', 'userName', `sid-${userId}`, `sdkToken-${userId}`, 'L3'];
        arr.forEach(val => {
            cookies.removeItem(val);
        });
        window.location.replace('./login.html');
    }

    // 显示新建课堂dialog
    function handleCreateClass() {
        let createDialog = document.querySelector("#createDialog");
        createDialog.style = 'display:block';
    }

    // 显示删除dialog
    function handleDeleteClass(id, pid) {
        deleteDialog.style = 'display:block';
        deleteID = id;
        deletePid = pid;
    }

    // 删除课程
    async function deleteRoom(roomID, pid) {
        try {
            const token = await getSDKToken(userId);
            // cookies.setItem(`sdkToken-${userId}`, token, new Date(new Date().getTime() + 3600 * 1000 * 24));
            const result = await api.post('/room/cancel', {
                uid: userId,
                room_id: String(roomID),
                pid: pid,
                sdk_token: token,
                device_id: ZegoRoomKit.deviceID(),
                secret_id: SecretID,
                verify_type: 3
            });
            console.log('delete', result);
            toast.success(lang.deleteSucceeded); // 删除成功

            // console.log("删除的课堂roomId:",roomID);
            axios({
                url:"http://localhost:9090/removeLiveClass",
                method:"POST",
                params:{
                    roomId:roomID
                }
            }).then(res => {
                console.log(res);
            }).catch(err => {
                console.log(err);
            })

            getListClass();
        } catch (error) {
            toast.error(lang.delete_failed); // 删除失败，请重试
            throw error;
        }
    }
    // 格式化时间
    function formatTime(time) {
        if (!time) return 0;
        const date = new Date(time);
        let h = date.getHours();
        let m = date.getMinutes();
        return `${h > 9 ? h : '0' + h}:${m > 9 ? m : '0' + m} `;
    }
    // 前往文件预览
    function toPreviewFile() {
        window.location.href = `./fileView.html?user=${userId}`
    }
    // 打开设置
    function openSetting() {
        const mask = document.querySelector('.setting-dialog-mask');
        mask.style.display = 'block';
    }
    // 关闭设置弹窗
    function hideSettingDialog() {
        const mask = document.querySelector('.setting-dialog-mask');
        const trg4 = document.querySelector('#trg4')
        trg4.style = 'transform:rotate(0deg)'
        mask.style.display = 'none';
        const menu = document.querySelectorAll('.set-bg')
        menu[0].style = 'display:none'

    }

    // 选择语言
    function selectLang(event, data) {
        const text = document.querySelector('#lang')
        const arrow = document.querySelectorAll('.arrow2')
        text.textContent = event.children[0].textContent
        if (data == '0') {
            cookies.setItem('language', 1);
            arrow[0].style = 'display:block';
            arrow[1].style = 'display:none';
            lang = zh;
        } else {
            cookies.setItem('language', 2);
            arrow[1].style = 'display:block';
            arrow[0].style = 'display:none';
            lang = en
        }
        loadProperties();
    }

    // 显示接入环境 语言选项
    function showSettingMenu(e, data) {
        const menu = document.querySelectorAll('.set-bg')
        const trg4 = document.querySelector('#trg4')
        if (data === 1) {
            if (menu[0].style.display === 'block') {
                menu[0].style = 'display:none';
                trg4.style = 'transform:rotate(0deg)'
            } else {
                menu[0].style = 'display:block';
                trg4.style = 'transform:rotate(180deg)'
            }
        }
    }

    // 麦克风开启
    function selectMP(e) {
        if (microphoneStatus) {
            microphoneStatus = false;
            e.classList.remove('is-checked');
        } else {
            microphoneStatus = true;
            e.classList.add('is-checked');
        }
        cookies.setItem('microphoneStatus', microphoneStatus); // 缓存
    }

    // 摄像头开启
    function selectCamera(e) {
        if (cameraStatus) {
            cameraStatus = false;
            e.classList.remove('is-checked');
        } else {
            cameraStatus = true;
            e.classList.add('is-checked');
        }
        cookies.setItem('cameraStatus', cameraStatus); // 缓存
    }

    // 大班课低延迟模式
    function selectLow(e) {
        if (lowDelayStatus) {
            lowDelayStatus = false;
            e.classList.remove('is-checked');
        } else {
            lowDelayStatus = true;
            e.classList.add('is-checked');
        }
        cookies.setItem('lowDelay', lowDelayStatus); // 缓存
    }
    // 开启笔锋
    function selectHandwriting(e) {
        if (enableHandwriting) {
            enableHandwriting = false;
            e.classList.remove('is-checked');
        } else {
            enableHandwriting = true;
            e.classList.add('is-checked');
        }
        cookies.setItem('enableHandwriting', enableHandwriting); // 缓存 
    }

    function checkSettings() {
        const MPDiv = document.getElementsByClassName('MP')[0];
        const CMDiv = document.getElementsByClassName('CM')[0];
        const LDDiv = document.getElementsByClassName('LD')[0];
        const HandwritingDiv = document.querySelector('.Handwriting');
        const textLang = document.querySelector('#lang')
        const arrow1 = document.querySelectorAll('.arrow1')
        const arrow2 = document.querySelectorAll('.arrow2')
        if (MPDiv) {
            if (microphoneStatus) {
                MPDiv.classList.add('is-checked');
            } else {
                MPDiv.classList.remove('is-checked');
            }
        }
        if (CMDiv) {
            if (cameraStatus) {
                CMDiv.classList.add('is-checked');
            } else {
                CMDiv.classList.remove('is-checked');
            }
        }
        if (LDDiv) {
            if (lowDelayStatus) {
                LDDiv.classList.add('is-checked');
            } else {
                LDDiv.classList.remove('is-checked');
            }
        }
        if (HandwritingDiv) {
            if (enableHandwriting) {
                HandwritingDiv.classList.add('is-checked');
            } else {
                HandwritingDiv.classList.remove('is-checked');
            }
        }
        if (language == 1) {
            textLang.textContent = "简体中文"
            arrow2[0].style = 'display:block'
        } else {
            textLang.textContent = "English"
            arrow2[1].style = 'display:block'
        }
    }
</script>